<style>
    .basicinfo {
        margin: 15px 0;
    }

    .basicinfo .row > .col-xs-4 {
        padding-right: 0;
    }

    .basicinfo .row > div {
        margin: 5px 0;
    }
    .courseInfo{
        margin-top: 0px;
        margin-bottom: 5px;
    }
</style>
<link rel="stylesheet" href="/assets/web/css/play.css">
<div id="content-container" class="container">
    <div class="content row bg-white" style="margin-left: 0px;width: 100%;">
        <div class="person-box chapter-box" style="text-align: center; margin: 0 auto;display: flex; justify-content: center;">
            <div style="margin-top: 10px;width: 60%;float: left;height: 80%">
                <h4 class="person-headbox">{$video.title}</h4>
                <div class="chapter-conbox-b" style="display: flex;align-items: center;justify-items: center">
                    <div id="mse"></div>
                    <script src="/assets/web/packages/xgplayer/browser/index.js" charset="utf-8"></script>
                    <script src="/assets/web/packages/xgplayer-hls.js/browser/index.js" charset="utf-8"></script>
                    <script type="text/javascript">
                        {if $video.safe_link}
                        var player = new HlsJsPlayer({
                            "id": "mse",
                            "url": "{$video.safe_link}",
                            "playsinline": true,
                            "whitelist": [""],
                            "width": "100%",
                            "height": 650,
                            "playbackRate": [0.5, 1.0,1.25, 1.5, 2.0],
                            "autoplay": false,
                            "fluid": false,
                            "loop": true,
                            "volume": 1,
                        });
                        {else/}
                            var player = new Player({
                                "id": "mse",
                                "url": "{$video.video_file}",
                                "playsinline": true,
                                "whitelist": [""],
                                "width": "100%",
                                "height": 650,
                                "playbackRate": [0.5, 1.0,1.25, 1.5, 2.0],
                                "autoplay": false,
                                "fluid": false,
                                "loop": true,
                                "volume": 1,
                            });
                            {/if}
                    </script>
                </div>
            </div>
        </div>
    </div>
</div>
